<template>
  <a-card :title="`${$t('My Points')}: ${pointsCount}`">
    <a-table bordered :dataSource="dataSource" :columns="columns" />
  </a-card>
</template>

<script lang="ts" setup>
import { ref } from "vue"
import { useI18n } from "vue-i18n";
import { myPoints, myPointsDetail } from "../../api/survey"

const { t } = useI18n();
const dataSource = ref([])
const columns = ref([
  { title: t(" "), dataIndex: "id", key: "id", width: 50},
  { title: t("Survey Title"), dataIndex: "title", key: "title", width: 256},
  { title: t("Audit Status"), dataIndex: "auditStatus", key: "auditStatus", width: 80},
  { title: t("Survey Points"), dataIndex: "points", key: "points",width: 150},
  { title: t("Survey Filling Time"), dataIndex: "fillingTime", key: "fillingTime",width: 200},
  { title: t("Time"), dataIndex: "createTime", key: "createTime",width: 200},
]);
const pointsCount = ref()
myPoints({}).then(res => {
    if (res.status == 200) {
      pointsCount.value = res?.data?.data?.points
    }
  })
const fetchPointsDetail = () => {
  myPointsDetail({}).then(res => {
    if (res.status == 200) {
      console.log(JSON.stringify(res.data))
      dataSource.value = res.data?.data?.rows
    }
  })
}

fetchPointsDetail()

</script>